<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>拖动滑块验证</title>
</head>
<body>
  <meta charset="utf8">
    <style>
        /* 滑动控件容器,灰色背景 */
        #dragContainer {
            position: relative;
            display: inline-block;
            background: #e8e8e8;
            width: 300px;
            height: 33px;
            border: 2px solid #e8e8e8;
        }
        /* 滑块左边部分,绿色背景 */
        #dragBg {
            position: absolute;
            background-color: #7ac23c;
            width: 0px;
            height: 100%;
        }
        /* 滑动验证容器文本 */
        #dragText {
            position: absolute;
            width: 100%;
            height: 100%;
            /* 文字水平居中 */
            text-align: center;
            /* 文字垂直居中,这里不能用百分比,因为百分比是相对原始line-height的,而非div高度 */
            line-height: 33px;
            /* 文本不允许选中 */
            user-select: none;
            -webkit-user-select: none;
        }
        /* 滑块 */
        #dragHandler {
            position: absolute;
            width: 40px;
            height: 100%;
            cursor: move;
        }
        /* 滑块初始背景 */
        .dragHandlerBg {
            background: #fff no-repeat center url("");
        }
        /* 验证成功时的滑块背景 有√*/
        .dragHandlerOkBg {
            background: #fff no-repeat center url("");
        }
    </style>
    <script>
       //加载（事件会在页面加载完成后触发）
        window.onload = function() {
            //获取滑动控件容器,灰色背景
            var dragContainer = document.getElementById("dragContainer");
            //获取滑块左边部分,绿色背景
            var dragBg = document.getElementById("dragBg");
            //获取滑动验证容器文本
            var dragText = document.getElementById("dragText");
            //获取滑块
            var dragHandler = document.getElementById("dragHandler");

            //滑块的最大偏移量                 =     滑动验证容器文本长度                  -      滑块长度
            var maxHandlerOffset = dragContainer.clientWidth - dragHandler.clientWidth;
            //是否验证成功的标记
            var isVertifySucc = false;
            
            initDrag();
 
            function initDrag() {
                //在滑动验证容器文本写入“拖动滑块验证”
                dragText.textContent = "拖动滑块验证";
                //给滑块添加鼠标按下监听
                dragHandler.addEventListener("mousedown", onDragHandlerMouseDown);
            }
             
           //选中滑块
            function onDragHandlerMouseDown() {
                //鼠标移动监听
                document.addEventListener("mousemove", onDragHandlerMouseMove);
                //鼠标松开监听
                document.addEventListener("mouseup",  onDragHandlerMouseUp);
            }
             
           //滑块移动
            function onDragHandlerMouseMove() {
                /*
                html元素不存在width属性,只有clientWidth
                offsetX是相对当前元素的,clientX和pageX是相对其父元素的
                */
               //滑块移动量
                var left = event.clientX - dragHandler.clientWidth / 2;
                //
                if(left < 0) {
                    left = 0;
                 //如果滑块移动量   > 滑块的最大偏移量 ，则调用验证成功函数
                } else if(left > maxHandlerOffset) {
                    left = maxHandlerOffset;
                    verifySucc();
                }
                //滑块移动量
                dragHandler.style.left = left + "px";
                //绿色背景的长度
                dragBg.style.width = dragHandler.style.left;
            }
            
           //松开滑块函数
            function onDragHandlerMouseUp() {
                //移除鼠标移动监听
                document.removeEventListener("mousemove", onDragHandlerMouseMove);
                //移除鼠标松开监听
                document.removeEventListener("mouseup", onDragHandlerMouseUp);
                //初始化滑块移动量
                dragHandler.style.left = 0;
                //初始化绿色背景
                dragBg.style.width = 0;
            }

            //验证成功
            function verifySucc() {
                //成功标记，不可回弹
                isVertifySucc = false;
                //容器文本的文字改为白色“验证通过”字体
                dragText.textContent = "验证通过";
                dragText.style.color = "white";
                //验证通过的滑块背景
                dragHandler.setAttribute("class", "dragHandlerOkBg");
                //移除鼠标按下监听
                dragHandler.removeEventListener("mousedown", onDragHandlerMouseDown);
                //移除 鼠标移动监听
                document.removeEventListener("mousemove", onDragHandlerMouseMove);
                //移除鼠标松开监听
                document.removeEventListener("mouseup", onDragHandlerMouseUp);
                // 匹配成功以后写入你要跳转的页面
                // window.location.href="成功页面.html";
            };
        }
    </script>
</head>
<body>
    <div id="dragContainer"><!-- 容器初始背景 -->
        <div id="dragBg"></div><!-- 绿色背景 -->
        <div id="dragText"></div><!-- 滑动容器文本 -->
        <div id="dragHandler" class="dragHandlerBg"></div>
    </div> <!--    滑块         滑块初始背景 -->
</body>
</html>